<!DOCTYPE html>
<p> {{ 'BANDWIDTH' | translate }}:
  <pretty value="ct.util.calculateValue(ct.data.global_upgrades.redox_bandwidth.power.base,
      ct.data.global_upgrades.redox_bandwidth.power,
      ct.state.player.global_upgrades_current.redox_bandwidth);"></pretty> level {{ct.state.player.global_upgrades_current.redox_bandwidth}}</p>
{{ 'ADJUST_AMOUNT' | translate }}:
<button type="button"
        class="btn btn-default"
        ng-click="ct.util.nextAmount(ct.state.player, 'adjustIndex', ct.adjustAmount)">
  {{ct.adjustAmount[ct.state.player.options.adjustIndex]}}
</button>
<br> {{ 'ADJUST_LEVEL' | translate }}:
<button type="button"
        class="btn btn-default"
        ng-click="ct.adjustLevel(ct.state.player, 'redox_bandwidth', ct.adjustAmount[ct.state.player.options.adjustIndex])"
        ng-disabled="ct.state.player.global_upgrades_current.redox_bandwidth === ct.state.player.global_upgrades.redox_bandwidth">
+{{ct.adjustAmount[ct.state.player.options.adjustIndex]}}
</button>
<button type="button"
        class="btn btn-default"
        ng-click="ct.adjustLevel(ct.state.player, 'redox_bandwidth', -ct.adjustAmount[ct.state.player.options.adjustIndex])"
        ng-disabled="ct.state.player.global_upgrades_current.redox_bandwidth === 1">
-{{ct.adjustAmount[ct.state.player.options.adjustIndex]}}
</button>
<div>
  <h2>{{ 'UPGRADE' | translate }}</h2>
  <div class="row">
    <div ng-repeat="key in ct.visibleUpgrades()"
         ng-click="ct.upgradeService.buyGlobalUpgrade(key, ct.state.player)"
         class="col-xs-12 btn btn-default"
         ng-class="{disabled: !ct.upgradeService.canBuyGlobalUpgrade(key, ct.state.player)}">
      <span class="pull-left">
    {{ 'LEVEL' | translate }}: {{ct.state.player.global_upgrades[key]}} {{ct.data.global_upgrades[key].name}}: {{ct.data.global_upgrades[key].description}}
  </span>
      <span class="pull-right"
            ng-repeat="(resource, price) in ct.data.global_upgrades[key].price">
    <pretty value="price*ct.upgradeService.priceMultiplier(key, ct.state.player)"></pretty> &nbsp;
    <get-html value="resource"></get-html>
  </span>
    </div>
  </div>
 Toggle all:
  <input type="checkbox"
         ng-model="ct.state.player.all_redox_active"
         ng-change="ct.checkAllSlots(ct.state.player)">
  <div ng-repeat="slot in ct.state.player.element_slots track by $index">
    <element-select index="$index"
                    ng-if="!slot"></element-select>
    <div ng-if="slot">
      <h2>{{ct.data.elements[slot.element].name}}</h2>
      <button type="button"
              class="btn btn-default"
              ng-click="ct.addRedox(ct.state.player, slot)">
  		{{ 'ADD' | translate }}
  	</button> Slots{{ 'SLOTS' | translate }}: {{ct.redoxSize(ct.state.player)}}/{{ct.util.calculateValue(ct.data.global_upgrades.redox_slots.power.base, ct.data.global_upgrades.redox_slots.power,
      ct.state.player.global_upgrades.redox_slots)}}
      <table class="table">
        <tbody>
          <tr class="animif">
            <div class="row">
              <th class="col-xs-10">
                {{ 'REDOX' | translate }}
              </th>
              <th class="col-xs-1">
                {{ 'ACTIVE' | translate }}
                <input type="checkbox"
                       ng-model="slot.active"
                       ng-change="ct.checkAll(slot)">
              </th>
            </div>
          </tr>
          <tr class="animif"
              ng-repeat="redox in ct.visibleRedox(slot) track by $index">
            <div class="row">
              <td class="col-xs-10">
                <button type="button"
                        class="btn btn-default"
                        ng-click="ct.removeRedox(slot, $index)">
  					{{ 'REMOVE' | translate }}
  				</button>
                <span ng-bind-html="ct.util.trustHTML(
            ct.format.reactionFormat(ct.util.calculateValue(ct.data.global_upgrades.redox_bandwidth.power.base,
                  ct.data.global_upgrades.redox_bandwidth.power,
                  ct.state.player.global_upgrades_current.redox_bandwidth),
                                      ct.redoxReaction(redox),
                                      ct.state.player))"></span>
                <div>
                  <label>{{ 'FROM' | translate }}:</label>
                  <rzslider rz-slider-model="redox.from"
                            rz-slider-options="{
						floor: -ct.data.elements[redox.element].electron_affinity.length,
						ceil: ct.data.elements[redox.element].ionization_energy.length,
						showTicksValues: true}">
                  </rzslider>
                </div>
                <div>
                  <label>{{ 'TO' | translate }}:</label>
                  <rzslider rz-slider-model="redox.to"
                            rz-slider-options="{
						floor: -ct.data.elements[redox.element].electron_affinity.length,
						ceil: ct.data.elements[redox.element].ionization_energy.length,
						showTicksValues: true}">
                  </rzslider>
                </div>
              </td>
              <td class="col-xs-1">
                <input type="checkbox"
                       ng-model="redox.active">
              </td>
            </div>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
